<template>
    <el-container class="home-container">
        <!-- 头部区域 -->
        <el-header>
            <div>
                <img :src="require('@/assets/logo.png')" class="logo">
                <span>后台管理系统</span>
            </div>
            <el-button type="danger" size="small" @click="logout_box_visible = true">登出<i
                    class="el-icon-caret-right"></i></el-button>
        </el-header>
        <!-- 页面主体区域 -->
        <el-container>
            <!-- 侧边栏 -->
            <el-aside width="200" style="background-color: rgb(238, 241, 246)">
                <el-card>
                    <div slot="header" class="avatar">
                        <el-avatar :size="70" :src="avatar_url"></el-avatar>
                        <span style="font-weight:bold;font-size:20px;">{{ name }}</span>
                    </div>
                    <el-descriptions class="margin-top" :column="1" size="small" border>
                        <el-descriptions-item>
                            <template slot="label"><i class="el-icon-user"></i>账号</template>
                            {{ account }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"><i class="el-icon-tickets"></i>ID</template>
                            {{ id }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"><i class="el-icon-tickets"></i>身份</template>
                            <el-tag size="small">管理员</el-tag>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-card>
                <el-menu :default-active="activePath">
                    <el-menu-item v-for="item in menu_item" :key="item.index" :index="item.index + ''"
                        @click="jump_to_destination(item.index)">
                        <template slot="title"><i :class="item.icon"></i>{{ item.menu_name }}</template>
                    </el-menu-item>
                </el-menu>
                <el-dialog title="警告" :visible.sync="logout_box_visible" width="20%" center top="30vh">
                    <p>确定退出登录吗？</p>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="logout_box_visible = false">取 消</el-button>
                        <el-button type="danger" @click="() => $router.push('/index')">确 定</el-button>
                    </span>
                </el-dialog>

            </el-aside>
            <!-- 右侧内容主体 -->
            <el-main>
                <!-- 路由占位符 -->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>
  
<script>
export default {
    data() {
        return {
            avatar_url: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
            name: '一寒止水',
            account: '11111111',
            id: '12121212',
            logout_box_visible: false,
            menu_item: [
                { index: 1, icon: 'el-icon-map-location', menu_name: '星级景区管理', path: 'scneic_spot' },
                { index: 2, icon: 'el-icon-office-building', menu_name: '星级酒店管理', path: 'hotel' },
                { index: 3, icon: 'el-icon-house', menu_name: '旅行社管理', path: 'travel_agency' },
                { index: 4, icon: 'el-icon-user', menu_name: '在岗导游管理', path: 'on_duty_tour_guide' },
                { index: 5, icon: 'el-icon-user', menu_name: '企业人员管理', path: 'administrator' },
                { index: 6, icon: 'el-icon-truck', menu_name: '救援车辆管理', path: 'car' },
                { index: 7, icon: 'el-icon-warning-outline', menu_name: '告警信息管理', path: 'warning_msg' },
                { index: 8, icon: 'el-icon-circle-plus-outline', menu_name: '导游申请管理', path: 'tour_guide_application' },
                { index: 9, icon: 'el-icon-service', menu_name: '游客投诉管理', path: 'complaints' },
            ],
            // 默认激活菜单项
            activePath: '1',

        }
    },

    mounted() {
        this.activePath = sessionStorage.index || '1'
        if (sessionStorage.type !== '1') {
            this.$router.push('/403')
        }
    },
    methods: {

        jump_to_destination(index) {
            // 存储当前页面菜单
            sessionStorage.index = index
            this.$router.push(`/admin/${this.menu_item[index - 1].path}`)
        },

    }
}
</script>
  
<style lang="less" scoped>
.home-container {
    height: 100%;
}

.el-header {
    background-color: #373d41;
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    color: #fff;
    font-size: 20px;

    >div {
        display: flex;
        align-items: center;

        span {
            margin-left: 15px;
        }
    }
}

.logo {
    width: 100px;
    margin-left: 10px;
}

.avatar {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
</style>
  